<template>
  <div class="app-container calendar-list-container ">

    <!-- <div class="advertisement">
      <img width="100%" :src="dialogImageUrl" alt=""
      class="advertisement">
    </div>
    <el-upload
      action="http://180.76.56.155:8086/uploadFile"
      :headers="headersPassword"
      list-type="picture-card"
      
      :file-list="fileList"
      >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog> -->
    <h2>广告轮播图一</h2> 
    <div class="advertisement">
      <img width="100%" :src="dialogImageUrlFirst" alt=""
      class="advertisement">
    </div>
      <div style="margin-top:20px">
     <el-form >
        <el-upload
          :show-file-list="false"
          :action= actionUp
          :headers="headersData"
          :http-request="fileRequest"
          :before-upload="beforeFile"
          :file-list="fileList"
          :data="attachData">
          <el-button size="small" type="primary">上传</el-button>
        </el-upload>
      </el-form>
    </div>
    <h2>广告轮播图二</h2>
    <div class="advertisement">
      <img width="100%" :src="dialogImageUrlSecond" alt=""
      class="advertisement">
    </div>
    
    <div style="margin-top:20px">
     <el-form >
        <el-upload
          :show-file-list="false"
          :action= actionUp
          :headers="headersData"
          :http-request="fileRequest1"
          :before-upload="beforeFile"
          :file-list="fileList"
          :data="attachData">
          <el-button size="small" type="primary">上传</el-button>
        </el-upload>
      </el-form>
    </div>
     <!-- <el-carousel class="advertisement">
    <el-carousel-item v-for="item in dialogImageUrlList" :key="item.index" class="advertisement">
      <img  :src="item.src" alt="" class="advertisement">
    </el-carousel-item>
    </el-carousel> -->
     
  </div>
</template>

<script>
import { getSystemParamter, updateSystemParamter, fileUpload,addSystemParamter } from '@/api/system'
import axios from "axios";
export default {
  name: 'system_address',
  data () {
    return {
      headersData:{
        CHECK_USER_VALUE:"GOLWAY",
        CHECK_PASSWORD_VALUE:"8D4DD3F80CEB6149329FDBD590B164F1",
        'http-equiv':"Content-Security-Policy",
         content:"upgrade-insecure-requests"
        },
        actionUp:"http://180.76.56.155:8086/uploadFile",
        attachData:{
       fileName:"123",
       deviceNo:"1234",
       programName:"12345",},
      dialogImageUrl:["",""],
      dialogImageUrlFirst:"",
      dialogImageUrlSecond:"",
      dialogImageUrlList:[
      {src:this.dialogImageUrlFirst,index:1},
      {src:this.dialogImageUrlSecond,index:2}
      ],
      dialogVisible: false,
      fileList:[],
      picSrc:"",
      systemId:"",
      picStatus:true,
    }
  },
  methods: {
     beforeFile(file){
            let name = file.name
            let type = name.substring(name.lastIndexOf('.')+1)
            if (type !=='jpg'&&type !=='png') {
              this.$message('请上传jPG或者PNG格式文件');
              return false
            }
          },
     fileRequest(item) {
            let uploadData = new FormData()
            uploadData.append('file',item.file)
            uploadData.append("fileName","first.jpg")
            uploadData.append("deviceNo","1000000")
            uploadData.append("programName","charging")
            axios.post('http://180.76.56.155:8086/uploadFile',uploadData,{
            headers: {'Content-Type':'multipart/form-data',
            CHECK_USER_VALUE:"GOLWAY",
            CHECK_PASSWORD_VALUE:"8D4DD3F80CEB6149329FDBD590B164F1"
            }}
            ).then(res =>{
                //成功
                //  console.log(res)
                 if(res.data.code==0){
                   this.dialogImageUrlFirst=""
                   this.dialogImageUrlFirst=res.data.results
                  this.updataPic()
                   this.$message({
                     type: 'success',
                      message: "上传成功，请稍后"
                     })
                  setTimeout(() => {
                    window.location.reload()
                  }, 3000);
                  
                 }
              })           
          },

     fileRequest1(item) {
            this.dialogImageUrlSecond=""
            let uploadData = new FormData()
            uploadData.append('file',item.file)
            uploadData.append("fileName","second.jpg")
            uploadData.append("deviceNo","1000000")
            uploadData.append("programName","charging")
            axios.post('http://180.76.56.155:8086/uploadFile',uploadData,{
            headers: {'Content-Type':'multipart/form-data',
            CHECK_USER_VALUE:"GOLWAY",
            CHECK_PASSWORD_VALUE:"8D4DD3F80CEB6149329FDBD590B164F1"
            }}
            ).then(res =>{
                //成功
                //  console.log(res)
                 if(res.data.code==0){
                   this.dialogImageUrlSecond=""
                   this.dialogImageUrlSecond=res.data.results
                  //  console.log(this.dialogImageUrlSecond)
                  //  this.dialogImageUrlList[1].src=this.dialogImageUrlSecond
                    this.updataPic()
                    this.$message({
                     type: 'success',
                      message: "上传成功，请稍后"
                     })
                    setTimeout(() => {
                    window.location.reload()
                  }, 3000);
                 }
              })
          },
  
  
    async updataPic (){
      
      if(this.dialogImageUrlFirst==""&&this.dialogImageUrlSecond!=""){
         this.picSrc=this.dialogImageUrlSecond
      }else if(this.dialogImageUrlFirst!=""&&this.dialogImageUrlSecond==""){
      this.picSrc=this.dialogImageUrlFirst
      }else{
        this.picSrc=this.dialogImageUrlFirst+","+this.dialogImageUrlSecond
      }

    if(this.picStatus){
    const { data } = await updateSystemParamter( this.systemId,{
        parameter: this.picSrc
      });
    }else{
    var systemType=7;
    const { data } = await addSystemParamter(systemType,{
        parameter: this.picSrc
      });
    }
    },
  
   async getParameter(){
      try{
        const { data } = await getSystemParamter(7)
        if(data==null){
           this.picStatus=false
           this.$message('暂无广告轮播图，请上传');
        }else{
          this.systemId=data.systemId
        }
        this.systemId=  data.systemId
        this.dialogImageUrl=data.parameter.split(',')
        this.dialogImageUrlFirst= data.parameter.split(',')[0]
        this.dialogImageUrlSecond= data.parameter.split(',')[1]
      }catch(error){

      }
   },

  },
  created(){
    this.getParameter()
  }
}
</script>

<style>
.advertisement{
  width: 686px;
  height: 200px;
  border: 1px solid #3ab984;
  border-radius: 10px;
}
 .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
